<template>
	<view class="pages">
		<view class="bgsjsjjs">
		<view class="top">
			<!-- <image class="logo" src="../../static/images/96.png" mode=""></image> -->
			<view></view>
			<view class="lang" @click="open2">
				<image class="icon" v-if="$i18n.locale == 'ft'" src="../../static/img/zh.png" alt=""></image>
				<image class="icon" v-if="$i18n.locale == 'en'" src="../../static/img/en.png" alt=""></image>
				<image class="icon" v-if="$i18n.locale == 'jp'" src="../../static/img/rb.png" alt=""></image>
				<image class="icon" v-if="$i18n.locale == 'ko'" src="../../static/img/hg.png" alt=""></image>
				<image class="icon" v-if="$i18n.locale == 'zh'" src="../../static/img/zh.png" alt=""></image>
				<p class="text" v-if="$i18n.locale == 'ft'">港澳繁體</p>
				<p class="text" v-if="$i18n.locale == 'en'">English</p>
				<p class="text" v-if="$i18n.locale == 'jp'">にほんご</p>
				<p class="text" v-if="$i18n.locale == 'ko'">한국어</p>
				<p class="text" v-if="$i18n.locale == 'zh'">中文简体</p>
				<image class="icon1" src="../../static/images/56.png" mode=""></image>
			</view>
			<view class="mask2" v-if="show2">
				<view @click="lang('en')">
					<img src="../../static/img/en.png" alt="">
					<text>English</text>
				</view>
				<view @click="lang('ft')">
					<img src="../../static/img/zh.png" alt="">
					<text>港澳繁體</text>
				</view>
				<view @click="lang('zh')">
					<img src="../../static/img/zh.png" alt="">
					<text>中文简体</text>
				</view>
				<view @click="lang('jp')">
					<img src="../../static/img/rb.png" alt="">
					<text>にほんご</text>
				</view>
				<view @click="lang('ko')">
					<img src="../../static/img/hg.png" alt="">
					<text>한국어</text>
				</view>
			</view>
		</view>
		</view>
		<!-- <view class="title">{{$t('login.title')}}</view> -->
		<!-- <view class="title1">{{$t('login.title10')}}</view> -->
	<!-- 	<view class="title" @click="goNextPage('./newlogin')" style="margin-top: 20rpx;font-size: 24rpx;">
			{{$t('login.title11')}}
		</view> -->
		<view class="con">
			<view class="title2">{{$t('login.title12')}}</view>
			<view class="title3" @click="goNextPage('./newlogin')">{{$t('login.title13')}}</view>
			<view class="inputbox">
				<image class="label" src="../../static/images/22.png" mode=""></image>
				<input v-model="email" type="text" :placeholder="$t('login.title4')" placeholder-class="placeholder" />
				<view class="fasong" v-if="fasong" @click="sendmsg">{{$t('login.title27')}}</view>
				<view class="fasong" v-if="!fasong">{{time}}s</view>
			</view>
			<view class="inputbox">
				<image class="label" src="../../static/images/32.png" mode=""></image>
				<input v-model="yzm" type="text" :placeholder="$t('login.title16')" placeholder-class="placeholder" />
			</view>
			<view class="inputbox">
				<image class="label" src="../../static/images/36.png" mode=""></image>
				<input v-model="psd" type="password" :placeholder="$t('login.title5')"
					placeholder-class="placeholder" />
			</view>
			<view class="inputbox">
				<image class="label" src="../../static/images/36.png" mode=""></image>
				<input v-model="confirmPsd" type="password" :placeholder="$t('login.title31')"
					placeholder-class="placeholder" />
			</view>
			<view class="inputbox">
				<image class="label" src="../../static/images/34.png" mode=""></image>
				<input v-model="paypsd" type="password" :placeholder="$t('login.title14')"
					placeholder-class="placeholder" />
			</view>
			<view class="inputbox">
				<image class="label" src="../../static/images/26.png" mode=""></image>
				<!-- <select-lay class="seclectpaytype" :value="paytype" slabel="type" svalue="typeid"
				:placeholder="$t('login.title15')" :options="areaList" @selectitem="selectitem"></select-lay> -->
				<picker @change="bindPickerChange" :value="index" :range="areaList" range-key="name"
					v-if="areaList.length>0" style="width: 100%;">
					<view style="padding: 0rpx 0px 0px 15px;">{{ areaList[index].name }}</view>
				</picker>
				<!-- 	<input v-model="guojia" type="text" :placeholder="$t('login.title15')"
					placeholder-class="placeholder" /> -->
			</view>
			<view class="inputbox">
				<image class="label" src="../../static/images/28.png" mode=""></image>
				<input v-model="yqm" :disabled="yqmBuloo" type="text" :placeholder="$t('login.title17')"
					placeholder-class="placeholder" />
			</view>

			<view class="btn" style="display:none;">{{$t('login.title18')}}</view>
			<view class="btn1" style="display:none;">{{$t('login.title19')}}</view>
			<view class="list" style="display:none;">
				<view class="listitem">
					<view></view>
					{{$t('login.title20')}}
				</view>
				<view class="listitem">
					<view></view>
					{{$t('login.title21')}}
				</view>
				<view class="listitem">
					<view></view>
					{{$t('login.title22')}}
				</view>
				<view class="listitem">
					<view></view>
					{{$t('login.title23')}}
				</view>
			</view>
			<view class="checkbox" style="display:none;">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox :checked="isCheckbox" />{{$t('login.title24')}}
					</label>
				</checkbox-group>
			</view>
			<view class="btns" @click="register">{{$t('login.title25')}}</view>
			<view class="text1" style="display:none;">{{$t('login.title26')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		domains
	} from '../../config/domain.js'
	export default {
		data() {
			return {
				show2: false,
				fasong: true,
				time: 60,
				email: '',
				yzm: '',
				psd: '',
				paypsd: '',
				guojia: '',
				yqm: '',
				confirmPsd: "",
				isCheckbox: true,
				areaList: [],
				index: null,
				yqmBuloo:false,
				fangchong:true
			}
		},
		onLoad() {
			this.getarea();
			var paraString =window.location.href;
			console.log(paraString);
			var paras = paraString.split("=");
			if (paras.length > 1 && paras[1] != '') {
				this.yqm = paras[1]; //邀请码
				uni.setStorageSync('yqm', this.yqm);
				this.yqmBuloo=true;
			} else {
				if(uni.getStorageSync('yqm')){
					this.yqm = uni.getStorageSync('yqm'); //邀请码
					this.yqmBuloo=true;
				}
			}
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value;
				this.guojia = this.areaList[this.index].id;
			},
			checkboxChange(e) {
				this.isCheckbox = !this.isCheckbox;
			},
			getarea() {
				let url = domains + 'api/area/getarea';
				let data = {}
				let mytype = 'get';
				uni.request({
					url,
					method: mytype,
					data,
					header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						'Lang': uni.getStorageSync('lang')
					},
					success: res => {
						if (res.data.code == 0) {
							console.log(res.data);
							this.areaList = res.data.data
							this.index = 0;
							this.guojia = this.areaList[this.index].id;
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			sendmsg() {
				let that = this;
				if(!that.fangchong){
					return false
				}
				that.fangchong = false
				uni.showLoading({});
				if (that.email == '') {
					uni.showToast({ //提示
						icon: 'none',
						title: that.$t('login.title28')
					})
					return false
				}
				let url = domains + 'api/notify/send_email?to=' + that.email;
				let mytype = 'get';
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						'Lang': uni.getStorageSync('lang')
					},
					success: res => {
						that.fangchong = true
						uni.hideLoading();
						if (res.data.code == 0) {
							uni.showToast({ //提示
								icon: 'none',
								title: res.data.msg
							})
							that.fasong = false
							let timer = setInterval(function(){
								if(that.time == 0){
									that.fasong = true
									that.time = 60
									clearInterval(timer)
								}else{
									that.time--
								}
							},1000)
						}else{
							uni.showToast({ //提示
								icon: 'none',
								title: res.data.msg
							})
							that.fasong = true
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			register() {
				let that = this;
				if (!that.isCheckbox) {
					uni.showToast({ //提示
						icon: 'none',
						title: that.$t('login.title43')
					})
					return false
				}
				if (that.email == '') {
					uni.showToast({ //提示
						icon: 'none',
						title: that.$t('login.title28')
					})
					return false
				}
				if (that.yzm == '') {
					uni.showToast({ //提示
						icon: 'none',
						title: that.$t('login.title32')
					})
					return false
				}
				if (that.psd == '') {
					uni.showToast({ //提示
						icon: 'none',
						title: that.$t('login.title29')
					})
					return false
				}
				if (that.paypsd == '') {
					uni.showToast({ //提示
						icon: 'none',
						title: that.$t('login.title33')
					})
					return false
				}
				if (that.guojia == '') {
					uni.showToast({ //提示
						icon: 'none',
						title: that.$t('login.title34')
					})
					return false
				}
				if (that.psd != that.confirmPsd) {
					uni.showToast({ //提示
						icon: 'none',
						title: that.$t('login.title42')
					})
					return false
				}
				let url = domains + 'api/user/register';
				let data = {
					account: that.email,
					sms_code: that.yzm,
					password: that.psd,
					pay_password: that.paypsd,
					invite_code: that.yqm,
					area_id: that.guojia
				}
				let mytype = 'post';
				uni.request({
					url,
					method: mytype,
					data,
					header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						'Lang': uni.getStorageSync('lang')
					},
					success: res => {
						if (res.data.code == 0) {
							// localStorage.setItem('info',res.data.data)
							// uni.navigateTo({
							// 	url: '../index/index'
							// })
							uni.showToast({ //提示
								icon: 'none',
								title: res.data.msg
							})
							setTimeout(function() {
								uni.navigateTo({
									url: './newlogin'
								})
							}, 1000);
						} else {
							uni.showToast({ //提示
								icon: 'none',
								title: res.data.msg
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			open2() {
				this.show2 = !this.show2
			},
			goNextPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			lang(e) {
				this.$i18n.locale = e;
				localStorage.setItem('lang', e);
				this.show2 = false;
				this.navList = [{
						'title': this.$t('indexTitle.title29'),
						"img": '../../static/images/3.png',
						"path": '../index/index'
					},
					{
						'title': this.$t('indexTitle.title30'),
						"img": '../../static/images/19.png',
						"path": '../activity/index'
					},
					{
						'title': this.$t('indexTitle.title31'),
						"img": '../../static/images/17.png',
						"path": '../configuration/index'
					},
					{
						'title': this.$t('indexTitle.title33'),
						"img": '../../static/images/15.png',
						"path": '../recharge/record'
					},
					{
						'title': this.$t('indexTitle.title34'),
						"img": '../../static/images/13.png',
						"path": '../vipStructure/vipStructure'
					},
					{
						'title': this.$t('indexTitle.title36'),
						"img": '../../static/images/9.png',
						"path": '../myPlatform/downloadPlatform'
					},
					{
						'title': this.$t('indexTitle.title32'),
						"img": '../../static/images/5.png',
						"path": '../userProfile/index'
					},
					{
						'title': this.$t('indexTitle.title35'),
						"img": '../../static/images/7.png',
						"path": '../recentNews/index'
					},
				]
				this.$emit("toTime", "我来自子组件")
				this.getarea()
			},
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.pages{
		width: 100%;
		height: 100%;
		 min-height: 100vh;
		background-image: url('../../static/images/97.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* background: linear-gradient(45deg,#6db8fc,#b0f2ff); */
	}
	.bgsjsjjs{
		width: 100%;
		height: 160px;
		background-image: url('../../static/images/97.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.top {
		width: 100%;
		padding: 0 40rpx;
		padding-top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		width: 50px;
		height: 70rpx;
	}

	.lang {
		width: 300rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.text {
		margin-left: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
	}

	.icon1 {
		width: 40rpx;
		height: 40rpx;
	}

	.title {
		padding-left: 40rpx;
		font-size: 28rpx;
		color: #fff;
		margin-top: 80rpx;
	}

	.title1 {
		width: 80%;
		padding-left: 40rpx;
		font-size: 44rpx;
		font-weight: bold;
		color: #000;
		margin-top: 60rpx;
	}

	.con {
		width: 100%;
		height: 84.5vh;
		padding: 40rpx;
		background-color: #fff;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: -50rpx;
	}

	.title2 {
		font-size: 44rpx;
		color: #ffd239;
		font-weight: bold;
		text-decoration-line: underline;
	}

	.title3 {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #ffd239;
		margin-bottom: 20rpx;
	}

	.inputbox {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #e7e6ec;
		border-radius: 20rpx;
		padding: 0 10rpx;
		margin-bottom: 30rpx;
	}

	.label {
		width: 80rpx;
		height: 40rpx;
		padding: 0 20rpx;
		border-right: 2rpx solid #000;
	}

	.inputbox input {
		flex: 1;
		padding-left: 30rpx;
		color: #000;
	}

	.inputbox .seclectpaytype {
		flex: 1;
		padding-left: 30rpx;
		color: #000;
	}

	.placeholder {
		color: #000;
	}

	.btn {
		width: 100%;
		text-align: left;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
	}

	.btn1 {
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 50rpx;
	}

	.listitem {
		width: 50%;
		font-size: 24rpx;
		color: #000;
		text-align: left;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.listitem view {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin-right: 10rpx;
		background-color: #000;
	}

	.checkbox {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #000;
		margin-top: 50rpx;
	}

	/deep/ uni-checkbox .uni-checkbox-input {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-color: #238bdf;
		color: #fff !important;
	}

	.btns {
		width: 300rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		background-color: #ffd239;
		border-radius: 100rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.text1 {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.mask2 {
		position: fixed;
		top: 96rpx;
		right: 20rpx;
		z-index: 99;
		background-color: #ffffff;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
		font-size: 24rpx;
	}

	.mask2 img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 30rpx;
	}


	.mask2 view {
		display: flex;
		color: #000;
		align-items: center;
		margin: 20rpx;
	}

	.fasong {
		width: 140rpx;
		font-size: 28rpx;
		text-align: center;
	}
</style>